<template>
  <!-- 消息中心 -->
  <div>
    <div v-if="bool">
      <!-- 头部 -->
      <van-row class="header4" gutter="20">
        <van-col span="2">
          <van-icon name="arrow-left" @click="$router.push('/home')" />
        </van-col>
        <van-col span="18">
          <span>消息中心</span>
        </van-col>
        <van-col span="4" @click="paixu">
          <span>排序</span>
          <van-icon name="sort" />
        </van-col>
      </van-row>
      <!-- tab栏 -->
      <van-tabs
        v-model="activeName"
        color="#ffcc33"
        title-active-color="#003399"
        line-width="60px"
      >
        <!-- 全部消息 -->
        <van-tab title="全部消息" name="a" :dot="bool2">
          <div class="allList">
            <van-row v-for="item in records" :key="item.id">
              <div class="show_box" v-if="item.isReader==1">
                <img src="../assets/消息中心/红点.png" alt="" />
              </div>
              <van-col span="18">
                <dl>
                  <dt>
                    <img :src="item.type == 1 ? img01 : img02" alt="" />
                  </dt>
                  <dd>
                    <!-- 置顶图片显示隐藏 -->
                    <div>
                      <span>系统消息</span>
                      <img :src="item.top == 1 ? img03 : ''" alt="" />
                    </div>
                    <div>发布人：{{ item.sourceName }}</div>
                  </dd>
                </dl>
              </van-col>
              <van-col span="6" class="time" @click="chan(item.id)">
                <span>{{ item.createTime }}</span>
                <van-icon name="arrow" />
              </van-col>
            </van-row>
          </div>
        </van-tab>
        <!-- 系统消息 -->
        <van-tab title="系统消息" name="b" :dot="bool2">
          <div class="allList">
            <van-row v-for="item in records" :key="item.id">
              <div class="show_box" v-if="item.isReader==1">
                <img src="../assets/消息中心/红点.png" alt="" />
              </div>
              <van-col span="18">
                <dl>
                  <dt>
                    <img src="../assets/消息中心/系统消息.png" alt="" />
                    <span class="dot"></span>
                  </dt>
                  <dd>
                    <!-- 置顶图片显示隐藏 -->
                    <div>
                      <span>系统消息</span>
                      <img :src="item.top == 1 ? img03 : ''" alt="" />
                    </div>
                    <div>发布人：{{item.sourceName}}</div>
                  </dd>
                </dl>
              </van-col>
              <van-col span="6" class="time"  @click="chan(item.id)">
                <span>{{item.createTime}}</span>
                <van-icon name="arrow" />
              </van-col>
            </van-row>
            
          </div>
        </van-tab>
        <!-- 个人消息 -->
        <van-tab title="个人消息" name="c" :dot="bool2">
          <div class="allList">
            <van-row v-for="item in records" :key="item.id">
              <div class="show_box" v-if="item.isReader==1">
                <img src="../assets/消息中心/红点.png" alt="" />
              </div>
              <van-col span="18">
                <dl>
                  <dt>
                    <img src="../assets/消息中心/个人信息.png" alt="" />
                    <span class="dot"></span>
                  </dt>
                  <dd>
                    <!-- 置顶图片显示隐藏 -->
                    <div>
                      <span>个人信息</span>
                      <img :src="item.top == 1 ? img03 : ''" alt="" />
                    </div>
                    <div>发布人：{{item.sourceName}}</div>
                  </dd>
                </dl>
              </van-col>
              <van-col span="6" class="time"  @click="chan(item.id)">
                <span>{{item.createTime}}</span>
                <van-icon name="arrow" />
              </van-col>
            </van-row>
            
          </div>
        </van-tab>
      </van-tabs>
    </div>
    
  </div>
</template>

<script>
import { GetAllmessage } from "@/request/api";
import MessageChild from "@/components/MessageChild"
export default {
  props: ["dot"],
  components:{
    MessageChild
  },
  data() {
    return {
      activeName: "a",
      bool: true,
      records: [],
      img01: require("../assets/消息中心/系统消息.png"),
      img02: require("../assets/消息中心/个人信息.png"),
      img03: require("../assets/消息中心/置顶.png"),
      // bool2: false
    };
  },
  methods: {
    chan(item) {
      this.$router.push("/MessageChild?id="+item)
    },
    chanBox(){
      this.bool = true
    },
    GetxitongList(type) {
      GetAllmessage({
        type,
        size: 10,
        current: 1
      }).then(res => {
        console.log(res);
        this.records = res.data.records;
      });
    },
    GetPersonList(type){
      GetAllmessage({
      type,
      size: 10,
      current: 1
    }).then(res => {
      console.log(res);
      this.records = res.data.records;
    });
    },
    paixu(){
      this.records = this.records.reverse();
      this.records.forEach((item,index)=>{
        if(item.top == 1){
          let arr = this.records.splice(index,1)
          this.records = arr.concat(this.records)
        }
      })
    }
  },
  created() {
    GetAllmessage({
      type: 0,
      size: 10,
      current: 1
    }).then(res => {
      this.records = res.data.records;
    });
  },
  watch :{
    activeName(newVal){
       if (this.activeName == "b") {
      // console.log(this.activeName);
      GetAllmessage({
        type: 0,
        size: 10,
        current: 1
      }).then(res => {
        this.records = res.data.records;
      });
    } else if (this.activeName == "c") {
      GetAllmessage({
        type: 1,
        size: 10,
        current: 1
      }).then(res => {
        this.records = res.data.records;
      });
    }
    }
  },
  computed:{
    bool2(){
      //  let ret = this.records.map(item=>{
      //   return item.isReader
      // })
      // return ret.inClude(1)
      let ret =  this.records.every((item)=>{
        return item.isReader == 1
      })
      return ret
    }
  }
  
};
</script>
 
<style lang = "less" scoped>
.van-row {
  border-bottom: 1px solid #eee;
  position: relative;
}
.header4 {
  background-color: #003399;
  color: #fff;
  padding: 0.166667rem 0.066667rem;
  text-align: center;
  display: flex;

  .van-icon {
    font-size: 0.186667rem;
    vertical-align: -0.056667rem;
  }
}
.allList {
  margin-top: 0.133333rem;
  background-color: #fff;
  dl {
    display: flex;
    dt {
      width: 0.4rem;
      margin-left: 0.133333rem;
      img {
        width: 100%;
        position: relative;
      }
    }
    dd {
      margin: 0 0.133333rem;
      div {
        img {
          width: 0.106667rem;
          margin-left: 0.106667rem;
        }
      }
    }
  }
}
.time {
  margin-top: 0.266667rem;
  color: #ccc;
  .van-icon {
    vertical-align: -0.023333rem;
  }
}
.shangpin {
  background-color: #003399;
  color: #fff;
  padding: 0.166667rem 0.066667rem;
  text-align: center;
  span {
    vertical-align: 0.03rem;
  }
  .van-icon {
    float: left;
    font-size: 0.186667rem;
  }
}
.xiaobottom {
  background-color: #fff;
  margin-top: 0.133333rem;
  padding: 0.1rem 0.2rem;
  .xitong {
    margin-bottom: 0.056667rem;
    ul {
      display: flex;
      .li1 {
        font-size: 0.16rem;
        color: #000;
      }
      .li2 {
        margin-left: 1.8rem;
        color: #ccc;
      }
    }
  }
  .person {
    font-size: 0.133333rem;
    color: rgb(145, 143, 143);
    margin-bottom: 0.2rem;
  }
  ul {
    li {
      font-size: 0.133333rem;
      line-height: 0.213333rem;
      color: rgb(102, 100, 100);
    }
  }
}
.show_box{
  position: absolute;
  top: 0;
  left: 12%;
  img{
    width: .066667rem;
    height: .066667rem;

  }
}
</style>